<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Introduction to Qyoto</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, Qt, Qyoto, C#, Introduction, learn Qyoto">
<meta name="description" content="This chapter is an introductory chapter to the
Qyoto library.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Introduction to Qyoto</h1>

<p>
In this part of the Qyoto C# programming tutorial, we will introduce and build 
the Qyoto library. We create our first Qyoto programs using the C# programming 
language.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
The purpose of this tutorial is to get you started with the Qyoto and C#. Images 
used in this tutorial can be downloaded 
<a href="/img/gui/sharpqyoto/images.zip">here</a>. I used some icons from the
tango icons pack of the Gnome project. The tutorial was created with the help
of Dimitar Dobrev, the maintainer of the Qyoto project.
</p>

<h2>About</h2>

<p>
<b>Qyoto</b> is a library that provides binding of the Qt library to the
.NET languages like C# or Visual Basic. 
Qt is a powerful cross-platform application development framework.
Its native language is C++. Qyoto is a part of the KDE desktop environment. 
Qyoto is created with the <b>SMOKE</b> library. It is a KDE project for creating 
bindings for multiple languages. The SMOKE stands for Scripting Meta 
Object Kompiler Engine.
</p>

<!--<h2>Setting up Qyoto on Windows</h2>

<p>
The easiest way to set up Qyoto on Windows is to download the pre-built 
binaries. We binaries can be dowloaded 
<a href="http://download.kde.org/stable/csharp-qt/4.0.1/win32/CSharpQt-Windows-4.0.1.7z.mirrorlist">here</a>.
Inside the zip file we will find the following files and directories:
</p>

<pre>
bin
COPYING.txt
COPYING_assemblygen.txt
include
lib
README.txt
share
</pre>

<p>
The README.txt file contains instructions to build Qyoto from the sources.
The most important for us are the bin and the lib directories. The bin
directory contains runtime dlls. We place this directory into the Path 
environment variable. (Restart of the computer is needed.) The lib directory
contains dlls which are needed to build our applications. We will reference them
when compiling applications.
</p>

<pre>
"C:\Windows\Microsoft.NET\Framework\v3.5\csc.exe" /r:C:\bin\Qyoto\lib\qyoto-qtcore.dll 
    /r:C:\bin\Qyoto\lib\qyoto-qtgui.dll %1
</pre>

<p>
The above is a simple bat file to compile basic Qyoto applications. 
(Everything is on one line.) Note that additional Qyoto dlls might be needed. 
For example, when we do some networking, we will need to reference the 
qyoto-qtnetwork.dll library.
</p>


<p>
We also need to place the dll files in the current working directory of
the compiled program. We have the following files in our directory:
</p>

<pre>
center.cs
compile2.bat
qyoto-qtcore.dll
qyoto-qtgui.dll
</pre>

<p>
The program is compiled using the <code>compile2.bat center.cs</code> command.
The center.exe file is created. The program references the QtCore and QtGui 
modules, so the necessary libraries are placed in the current working directory 
of the executable file. 
</p>-->

<h2>Building Qyoto on Linux</h2>

<p>
We build the Qyoto library from the latest sources.
</p>

<pre>
$ git clone git://anongit.kde.org/smokegen
$ git clone git://anongit.kde.org/smokeqt
$ git clone git://anongit.kde.org/assemblygen
</pre>

<p>
We dowload the sources from the git repositories. 
</p>

<pre>
$ sudo apt-get install cmake-qt-gui
</pre>

<p>
We install the cmake-qt-gui if not present.
</p>

<p>
We build each three packages in the following order:
1) smokegen, 2) smokeqt and 3) assemblygen. We run the cmake-qt-gui
in each of the three directories. We specify the source, the build
directory and set the CMAKE_BUILD_TYPE to Release. We click on the 
Configure and the Generate buttons. Change directory to the build directory.
Run <code>make</code> and <code>sudo make install</code>. 
</p>


<pre>
$ export LD_LIBRARY_PATH=/usr/local/qt4/lib
</pre>

<p>
Before building the smokeqt package, we set an environment variable. 
After each build, we run the <code>sudo ldconfig</code> command. 
</p>

<pre>
$ ls /usr/local/lib/mono/qyoto 
qyoto-qtcore.dll  qyoto-qtsvg.dll
qtscript.dll      qyoto-qtgui.dll      qyoto-qtuitools.dll
qttest.dll        qyoto-qtnetwork.dll  qyoto-qtwebkit.dll
qtuitools.dll     qyoto-qtopengl.dll   qyoto-qtxml.dll
qtwebkit.dll      qyoto-qtscript.dll   qyoto-qtxmlpatterns.dll
qyoto-phonon.dll  qyoto-qtsql.dll
</pre>

<p>
We have the Qyoto dlls in the /usr/local/lib/mono/qyoto directory.
</p>

<pre>
$ dmcs -r:/usr/local/lib/mono/qyoto/qyoto-qtcore.dll \
> -r:/usr/local/lib/mono/qyoto/qyoto-qtgui.dll donut.cs
</pre>

<p>
The above command shows, how to compile the donut example. The -r parameter of the
mono C# compiler loads the Qt assembly. It is a dynamic library. The commnad shows
a path to the dll library on a Linux system. 
</p>


<h2>Creating a Tooltip</h2>

<p>
The first example will show a tooltip. A tooltip is a small rectangular window, 
which gives a brief information about an object. It is usually a GUI component. 
It is part of the help system of the application. 
</p>

<pre class="code">
using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program displays a
 * tooltip.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */


public class QyotoApp : QWidget 
{
    public QyotoApp() 
    {
        WindowTitle = "Tooltip";

        ToolTip = "This is QWidget";    
        Resize(250, 150);
        Move(300, 300);
        Show();
    }
    
    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}
</pre>

<p>
The example creates a window. If we hover a mouse pointer over the area of the
window, a tooltip pops up. 
</p>

<pre class="explanation">
using System;
using QtCore;
using QtGui;
</pre>

<p>
The <code>using</code> keyword imports necessery types that we will use
in the application.
</p>

<pre class="explanation">
public class QyotoApp : QWidget {
</pre>

<p>
The example inherits from a <code>QWidget</code>. The QWidget class is the base 
class of all user interface objects. The widget is the atom of the user 
interface. It receives mouse, keyboard and other events from the window system.
</p>

<pre class="explanation">
WindowTitle = "Tooltip";
</pre>

<p>
Setting the <code>WindowType</code> property will display a title for a window. 
</p>

<pre class="explanation">
ToolTip = "This is QWidget";
</pre>

<p>
We set a tooltip through the <code>ToolTip</code> property.
</p>

<pre class="explanation">
Resize(250, 150);
</pre>

<p>
Here we set the width and the height of the window. 
</p>

<pre class="explanation">
Move(300, 300);
</pre>

<p>
The <code>Move()</code> method moves the window on the
screen. 
</p>

<pre class="explanation">
Show();
</pre>

<p>
When everything is ready, we show the window on the screen. 
</p>

<pre class="explanation">
[STAThread]
public static int Main(String[] args) 
</pre>

<p>
The [STAThread] attribute is required on Windows platform. It ensureas 
that the communication with the COM components is safe. In some 
cases like Clipboard and File dialogs, we are calling COM components. 
Without this attribute, the application would crash.
</p>

<pre class="explanation">
new QApplication(args);
new QyotoApp();
return QApplication.Exec();
</pre>

<p>
These three lines set up the application. 
</p>

<img src="/img/gui/sharpqyoto/tooltip.png" alt="Tooltip">
<div class="figure">Figure: Tooltip</div>


<h2>Centering a window</h2>

<p>
In the second example, we will center the window
on the screen. 
</p>

<pre class="code">
using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program centers a window
 * on the screen.
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */


public class QyotoApp : QWidget 
{
    const int WIDTH = 250;
    const int HEIGHT = 150;
    
    public QyotoApp() 
    {
        WindowTitle = "Center";
                
        Resize(WIDTH, HEIGHT);
        Center();
        Show();
    }
    
    private void Center()
    {
        QDesktopWidget qdw = new QDesktopWidget();

        int screenWidth = qdw.Width;
        int screenHeight = qdw.Height;

        int cx = (screenWidth - WIDTH) / 2;
        int cy = (screenHeight - HEIGHT) / 2;        
        
        Move(cx, cy);
    }

    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}
</pre>

<p>
The Qyoto does not have a single method
to center a window.
</p>


<pre class="explanation">
const int WIDTH = 250;
const int HEIGHT = 150;
</pre>

<p>
These two constants define the width and height of the
application window.
</p>

<pre class="explanation">
Center();
</pre>

<p>
The code to center the window is placed in the <code>Center()</code> method.
</p>

<pre class="explanation">
QDesktopWidget qdw = new QDesktopWidget();
</pre>

<p>
The <code>QDesktopWidget</code> class provides information about the screen. 
</p>

<pre class="explanation">
int screenWidth = qdw.Width();
int screenHeight = qdw.Height();
</pre>

<p>
Here we determine the screen width and height. 
</p>

<pre class="explanation">
int cx = (screenWidth - WIDTH) / 2;
int cy = (screenHeight - HEIGHT) / 2;  
</pre>

<p>
Here we calculate the x, y coordinates of the centered window. 
To center a window on the screen, we need to know the size of the
screen and the size of the window. 
</p>

<pre class="explanation">
Move(cx, cy);
</pre>

<p>
We move the window to the computed cx, cy coordinates.
</p>


<h2>Quit button</h2>

<p>
In the last example of this section, we will create a quit button. 
When we press this button, the application terminates. 
</p>

<pre class="code">
using System;
using QtCore;
using QtGui;

/**
 * ZetCode Qyoto C# tutorial
 *
 * This program creates a quit
 * button. When we press the button,
 * the application terminates. 
 *
 * @author Jan Bodnar
 * website zetcode.com
 * last modified October 2012
 */


public class QyotoApp : QWidget 
{
    public QyotoApp() 
    {
        WindowTitle = "Quit button";

        InitUI();

        Resize(250, 150);
        Move(300, 300);
        Show();
    }

    public void InitUI() 
    {    
        QPushButton quit = new QPushButton("Quit", this);

        Connect(quit, SIGNAL("clicked()"), qApp, SLOT("quit()"));
        quit.SetGeometry(50, 40, 80, 30);
    }

    [STAThread]
    public static int Main(String[] args) 
    {
        new QApplication(args);
        new QyotoApp();
        return QApplication.Exec();
    }
}
</pre>

<p>
We use the <code>QPushButton</code>. It is rectangular and usually shows a text 
label. 
</p>

<pre class="explanation">
InitUI();
</pre>

<p>
We delegate the creation of the user interface to the <code>InitUI()</code> 
method.
</p>

<pre class="explanation">
QPushButton quit = new QPushButton("Quit", this);
</pre>

<p>
We create the button widget. The first parameter of the constructor is the label,
which the button displays. The second parameter is the parent widget of the
button. 
</p>

<pre class="explanation">
Connect(quit, SIGNAL("clicked()"), qApp, SLOT("quit()"));
</pre>

<p>
The <code>clicked()</code> signal is emitted, when we click on the button. 
The <code>Connect()</code> method connects a signal to a particular slot of 
an object. The first parameter of the method is the object, that receives the 
signal. In our case it is the application object. The second parameter is the
method, which is called. In our case it is the <code>quit()</code> method of the 
application object. The <code>qApp</code> is a global reference to the 
application object. 
</p>

<pre class="explanation">
quit.SetGeometry(50, 40, 80, 30);
</pre>

<p>
We position and size the button widget. The first two parameters are the x, y
coordinates of the button. The last two parameters are the width and 
height of the button.
</p>

<img src="/img/gui/sharpqyoto/quitbutton.png" alt="Quit button">
<div class="figure">Figure: Quit button</div>

<p>
This section was an introduction to the Qyoto library with the C# language.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br>

<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified November 1, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

